<template>
    <!--构建大屏-->
    <div class="box"
         v-loading="loading"
         element-loading-text="加载中请稍等"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(22, 160, 205, 0.3)">
        <div class="panelBox" @click="setChooseComponent(null)"
             :style="'width:'+panelBoxStyle.width+'px;height:'+panelBoxStyle.height+'px'" id="panelBox">
            <div class="panel" :style="setPanelStyle()" id="panel">
                <div v-for="(item,index) in panelDom.component" @click.stop="setChooseComponent(item)">
                    <div :is="item.componentName" :id="item.uuid" :ref="item.uuid" :config="item"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as u from '@/util/util'
    import components from '@/util/screen_components'

    export default {
        name: "screen_view",
        components: components,
        computed: {
            //主面板加载完成
            initOk() {
                return this.$store.state.initOk
            },
        },
        data() {
            return {
                //页面加载
                loading: true,
                //面板样式
                panelBoxStyle: {},
                //面板内容
                panelDom: {
                    //背景色
                    backgroundColor: "rgba(40, 61, 99, 1)",
                    //背景图
                    backgroundImg: require("@/assets/img/bg1.png"),
                    //大屏适应宽度
                    width: 0,
                    //大屏适应高度
                    height: 0,
                    //组件集合
                    component: [],
                },
            }
        },
        created() {
            //初始化
            this.init();
        },
        methods: {


            //选中一个组件
            setChooseComponent(item) {
                //共享到vuex
                this.$store.commit("setChooseComponent", item);
            },


            //全屏监听
            full() {
                var vm = this;
                document.addEventListener('webkitfullscreenchange', function (e) {
                    vm.calculate();
                })
                document.addEventListener('fullscreenchange', function (e) {
                    vm.calculate();
                })
                document.addEventListener('MSFullscreenChange', function (e) {
                    vm.calculate();
                })
                document.addEventListener('mozfullscreenchange', function (e) {
                    vm.calculate();
                })
            },

            //预览
            preview() {
                this.$store.commit("setScreenMove", false)
                let interval = setInterval(res => {
                    let element = document.getElementById('panel')
                    if (element != null) {
                        window.clearInterval(interval)
                        // FireFox
                        if (element.mozRequestFullScreen) {
                            element.mozRequestFullScreen()
                        }
                        // Chrome等
                        else if (element.webkitRequestFullScreen) {
                            element.webkitRequestFullScreen()
                        }
                        // IE11
                        else if (element.msRequestFullscreen) {
                            element.msRequestFullscreen()
                        }
                    }
                }, 10)
            },

            setPanelStyle() {
                return {
                    "transform": "scale(" + this.panelDom.w + "," + this.panelDom.h + ")",
                    "height": this.panelDom.height + "px",
                    "width": this.panelDom.width + "px",
                    "background-color": this.panelDom.backgroundColor,
                    "background-image": 'url(' + this.panelDom.backgroundImg + ')',
                    "background-size": "100% 100%"
                }
            },

            //初始化
            init() {
                var vm = this;
                //浏览器按钮监听事件
                document.onkeydown = function (e) {
                    let key = window.event.keyCode;
                    if (key == 122) {   //全屏
                        window.event.preventDefault() //关闭浏览器快捷键
                        vm.preview()
                    }
                };
                //全屏监听
                this.full();
                u.get("/bus-screen/getScreenJson/" + this.$route.params.id).then(res => {
                    if (res == null) {
                        this.$router.go(-1)
                    }
                    this.panelDom = JSON.parse(res);
                    //共享到vuex
                    this.$store.commit("setPanelDom", this.panelDom)
                    this.$store.commit("setInitOk", true)
                    this.$store.commit("setScreenMove", false)
                    //设置面板宽度
                    //计算父面板高宽
                    this.calculate();
                    //共享到vuex
                    this.$store.commit("setPanelDom", this.panelDom)
                    this.loading = false;
                    this.preview();
                }).catch(res => {
                    this.$router.go(-1)
                })

            },

            //计算宽高比例
            calculate() {
                this.panelBoxStyle.width = document.documentElement.clientWidth;
                this.panelBoxStyle.height = document.documentElement.clientHeight;
                let w = (this.panelBoxStyle.width / this.panelDom.width);
                let h = (this.panelBoxStyle.height / this.panelDom.height);
                this.panelDom.w = w;
                this.panelDom.h = h;
            }

        },
    }
</script>

<style scoped lang="scss">
    .box {
        width: 100%;
        height: 100%;
        background: #1d1f26;
        flex-direction: column;

        .panelBox {
            .panel {
                transform-origin: 0 0;
                overflow: hidden;
            }
        }
    }
</style>
